<template>
	<view class="itemBox" :class="type == 2 ? 'yellow' : ''">
		<template v-if="!isOrder">
			<UserByList @userPage="$emit('userPage',item)" :item="item" :type="type"
				@communicates="$emit('communicates',item)"></UserByList>
		</template>
		<view class="toppingByList" v-if="item.is_topping == '2'">
			<u-icon name="arrow-upward"></u-icon>
		</view>
		<template v-if="type == 1">
			<view class="flex u-margin-top-20">
				<view class="productImg">
					<image class="img" mode="aspectFill" v-for="(i,j) in storeImages(1, item.buy_images)"
						:key="j" :src="toImages(i)">
					</image>
				</view>
				<view style="flex: 1;">
					<view class="lineP">
						<view class="title u-line-3">{{item[$t('item.name')] || $t("暂无信息")}}</view>
					</view>
					<view class="lineP flexClum">
						<Tag class="u-margin-bottom-10" cusStyle="width:330rpx;"
							:text="item[$t('item.brand')] || $t('暂无信息')" color="#00a0e9"></Tag>
						<view class="flex">
							<Tag class="u-margin-bottom-10" cusStyle="width:160rpx;"
								:text="item[$t('item.goods_weight')] + $t('kg')" color="#13b5b1">
							</Tag>
							<Tag class="u-margin-bottom-10" cusStyle="width:150rpx;"
								:text="item[$t('item.goods_volume')] + $t('m³')" color="#ef9b17">
							</Tag>
						</view>
					</view>
					<view class="lineP flexClum u-margin-top-20">
						<view class="label title_red u-margin-bottom-10 u-font-24">
							<image style="width: 30rpx;height: 30rpx;margin-right: 10rpx;"
								:src="HTTP_IMG_UTL+'transportIcon1.png'"> </image>
							{{$t("货源地")}}
						</view>
						<view class="text u-line-2" style="height: 80rpx;word-break: break-word;">
							{{item.hwdd || $t("暂无信息")}}
						</view>
					</view>
					<view class="lineP" style="align-items: center;">
						<view class="block">
							{{ item[$t('item.goods_num')] || '' }}
						</view>
						<view class="u-font-32">{{ item[$t('item.number_unit')]}}</view>
					</view>
					<view class="lineP title_red u-font-40" style="justify-content: flex-end;align-items: baseline;">
						{{ item[$t('desire_price')]}}
						<text class="small u-font-28 u-margin-left-10">
							{{$t(item.price_unit)}}/{{ item[$t('item.number_unit')]}}
						</text>
					</view>
				</view>
			</view>
		</template>
		<template v-if="type == 2">
			<view class="flex u-margin-top-20">
				<view class="productImg">
					<image class="img" mode="aspectFill" v-for="(i,j) in storeImages(1, item.buy_images)" :key="j"
						:src="toImages(i)">
					</image>
				</view>
				<view style="flex: 1;">
					<view class="lineP">
						<view class="title u-line-3">{{item[$t('item.name')] || $t("暂无信息")}}</view>
					</view>
					<view class="lineP flexClum">
						<Tag class="u-margin-bottom-10" cusStyle="width:330rpx;"
							:text="item[$t('item.brand')] || $t('暂无信息')" color="#00a0e9"></Tag>
						<view class="flex">
							<Tag class="u-margin-bottom-10" cusStyle="width:160rpx;"
								:text="item[$t('item.goods_weight')] + $t('kg')" color="#13b5b1">
							</Tag>
							<Tag class="u-margin-bottom-10" cusStyle="width:150rpx;"
								:text="item[$t('item.goods_volume')] + $t('m³')" color="#ef9b17">
							</Tag>
						</view>
					</view>
					<view class="lineP flexClum u-margin-top-20">
						<view class="label title_red u-margin-bottom-10 u-font-24">
							<image style="width: 30rpx;height: 30rpx;margin-right: 10rpx;"
								:src="HTTP_IMG_UTL+'transportIcon1.png'"> </image>
							{{$t("货物到达地")}}
						</view>
						<view class="text u-line-2" style="height: 80rpx;word-break: break-word;">
							{{item.hwdd || $t("暂无信息") }}
						</view>
					</view>
					<view class="lineP" style="align-items: center;">
						<view class="block">
							{{ item[$t('item.goods_num')] || '' }}
						</view>
						<view class="u-font-32">{{ item[$t('item.number_unit')]}}</view>
					</view>
				</view>
			</view>
			<view class="xiaorenBox flex">
				<img v-if="lang === 'zh'" :src="HTTP_IMG_UTL+'xiaoren.png'" class="xiaoren" alt="" />
				<img v-else :src="HTTP_IMG_UTL+'xiaoren.png'" class="xiaoren" alt="" />
				<view class="lineP title_red u-font-40" style="justify-content: flex-end;align-items: baseline;">
					{{ item[$t('desire_price')]}}
					<text class="small u-font-28 u-margin-left-10">
						{{$t(item.price_unit)}}/{{ item[$t('item.number_unit')]}}
					</text>
				</view>
			</view>
		</template>
		
		<slot name="list"></slot>
		<view class="bidding_address">
			<view class="bidding_ares">
				<view class="bidding_time">
					<text style="line-height: 50rpx;">{{ time("S", item.createtime) }}</text>
				</view>
			</view>
			<view class="bidding_btn" @click.stop="$emit('communicate',item)" v-if="!isOrder">
				<text class="btnStyle">
					{{ type == 1 ? $t('即时沟通') : $t(jb) }}
				</text>
			</view>
		</view>

		<slot name="btns"></slot>

	</view>
</template>

<script>
	import {
		createC2CConversation,
		isBase64,
		time
	} from "@/common/public";
	import FromToCountry from '@/components/FromToCountry.vue'
	import Tag from '@/components/Tag.vue'
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from "@/config/app";
	import UserByList from '@/components/UserByList.vue'
	export default {
		components: {
			FromToCountry,
			Tag,
			UserByList
		},
		props: {
			item: {
				type: Object,
				default: {},
			},
			type: {
				type: String | Number,
				default: '1',
			},
			isOrder: {
				type: [Boolean,Number],
				default: false,
			}
		},
		computed: {
			toImages() {
				return (src) => {
					return isBase64(src) ? src : (this.isOrder ? src.url : IMAGE_URL + src)
				}
			},
			storeImages() {
				return (sum, images) => {
					return (images && images.length > 0) ? [images[0]] : images
				}
			},
		},
		data() {
			return {
				HTTP_IMG_UTL,
				lang: getApp().globalData.lang,
				
				jb:'参与订单'
			};
		},
		methods: {
			time
		},
		mounted() {
			if(uni.getStorageSync('off')==false){
				this.jb = '参与订单'
			}else{
				this.jb = '参与竞标'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.itemBox {
		margin: 0 auto;
		box-shadow: 0 0 10px #ddd;
		background: #ddd;
		padding: 10px;
		border-radius: 20rpx;
		background: #fff;
		margin-bottom: 20rpx;
		position: relative;

		&.yellow {
			background: #fefcf6;
		}

		.title_red {
			font-weight: 600;
			color: #e33a13;
		}

		.priceBox {
			background: linear-gradient(90deg, #fe4e31, #ffcd84);
			border-radius: 20rpx;
			padding: 15rpx 30rpx;
			color: #fff;
			font-size: 50rpx;
			padding-top: 40rpx;
			margin-top: -60rpx;
			margin-bottom: 10rpx;

			.small {
				margin-left: 10rpx;
				font-size: 30rpx;
			}

			&.jingpai {
				background: linear-gradient(-90deg, #fe4e31, #ffcd84);
				text-align: right;
			}
		}

		.lineP {
			margin: 0 auto;
			margin-bottom: 10rpx;
			display: flex;
			width: 90%;

			.block {
				border-radius: 10rpx;
				border: 1px solid #666;
				padding: 10rpx 6rpx;
				margin-right: 15rpx;
				width: 80rpx;
				text-align: center;
			}

			.label {
				// flex: 1;
			}

			.text {
				// margin-top: 10rpx;
				// flex: 1;
				// margin-left: 20rpx;
				overflow: hidden;
				// white-space: nowrap;
				text-overflow: ellipsis;
			}



			.price {
				font-size: 50rpx;
				font-weight: normal;

				.small {
					font-size: 24rpx;
				}
			}
		}

		.xiaorenBox {
			// position: absolute;
			// bottom: 80rpx;
			// transform: rotate(180deg, 180deg);

			.xiaoren {
				width: 220rpx;
				height: 100rpx;
				position: relative;
				// top: 90rpx;
			}
		}

		.flex {
			display: flex;
			justify-content: space-between;

			.flexClum {
				display: flex;
				flex-direction: column;
				align-content: center;
				align-items: flex-start;
				justify-content: center;

				&.jingpai {
					align-content: baseline;
					justify-content: flex-end;
					flex-wrap: wrap;
					align-items: flex-start;
					flex-direction: row;
				}


				.xiaoren {
					width: 220rpx;
					height: 100rpx;
					position: relative;
					top: 90rpx;
				}
			}
		}

		.productImg {
			.img {
				width: 300rpx;
				height: 450rpx;
				overflow: hidden;
				border-radius: 20rpx;
				// box-shadow: 0 0 20rpx #ddd;
			}
		}

		//地址信息
		.bidding_address {
			padding: 13.6rpx $my-padding-20 10rpx $my-padding-20;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			font-size: $my-font-size21;
			font-weight: 400;
			color: #888888;
			line-height: 30rpx;

			.bidding_ares {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;

				.bidding_ares1 {
					display: flex;
					justify-content: flex-start;

					image {
						width: 24.42rpx;
						height: 31.4rpx;
					}
				}
			}
		}

		.bidding_betwn {
			display: flex;
			// justify-content: space-between;
			align-items: flex-end;

			.chat {
				transform: translateY(0rpx);
			}

			.userName {
				min-height: 50rpx;

				.bidding_user_text {
					display: block;
					padding-left: 0;
				}

				.country_icon {
					padding-left: 0;
				}
			}

			.flex {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}


			.bidding_user {
				display: flex;
				flex-direction: row;
				align-items: center;
				// padding: $my-padding-20;
				margin-right: 10rpx;


				//头像大小
				.bidding_user_image {
					padding-left: $my-padding-10;
					height: 50rpx;
					width: 50rpx
				}

				//用户图标
				.bidding_user_icon {
					padding-left: $my-padding-10;
					height: 35rpx;
					width: 35rpx;
				}
			}
		}

		.title {
			// color: #e43b14;
			font-size: 30rpx;
			// border-bottom: 1rpx solid #cccccc;
			font-weight: 600;
			// padding-bottom: 50rpx;
			margin-bottom: 10rpx;
			word-break: break-word;
			height: 110rpx;
			// padding-left: 28rpx;

			&.none-border-bottom {
				border-bottom: none;
			}
		}

		.type {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			padding-left: 10rpx;
			padding-right: 22rpx;
			// width: 90%;
			// margin: 0 auto;
		}

		.address {
			margin-bottom: 32rpx;
			font-size: 30rpx;
			position: relative;
			padding-left: 45rpx;
			// font-weight: 600;

			// .warp {
			// 	width: 55%;
			// }

			.headline_img {
				position: absolute;
				left: 0;
				top: 4rpx;
				width: 30rpx;
				height: 30rpx;
			}

			.label {
				font-weight: 600;
				margin-bottom: 10rpx;
			}
		}
	}
</style>